<script setup lang="ts">
import { timeGap } from '@/utils/dateUtil'
import { CommentTreeDto } from '@/api/comment/type'
import { PropType } from 'vue'
import { clickDislike, clickLike } from '@/api/comment'

const props = defineProps({
  comment: {
    type: Object as PropType<CommentTreeDto>,
    required: true,
    default: () => <CommentTreeDto>{}
  }
})

const { comment } = toRefs(props)

/** 点赞图标操作 */
const likeIconClick = () => {
  // 如果
  clickLike(comment.value.id).then(({ data: res }) => {
    if (res.code == 200) {
      // 点赞标识反转
      comment.value.clickLike = !comment.value.clickLike
      // 计数变化 - 点赞数
      if (comment.value.clickLike) {
        comment.value.likeCount++
      } else {
        comment.value.likeCount--
      }
      // 计数变化 - 踩数
      if (comment.value.clickDislike) {
        comment.value.dislikeCount--
      }

      // 踩取消
      comment.value.clickDislike = false
    }
  })
}

const dislikeIconClick = () => {
  clickDislike(comment.value.id).then(({ data: res }) => {
    if (res.code == 200) {
      // 踩标识反转
      comment.value.clickDislike = !comment.value.clickDislike
      // 计数变化 - 踩数
      if (comment.value.clickDislike) {
        comment.value.dislikeCount++
      } else {
        comment.value.dislikeCount--
      }
      // 计数变化 - 点赞数
      if (comment.value.clickLike) {
        comment.value.likeCount--
      }
      // 点赞取消
      comment.value.clickLike = false
    }
  })
}
</script>

<template>
  <div class="titleChild">
    <div class="title">
      <div class="title-reply">
        <!--回复信息-->
        <div class="title-reply--name">
          <span>{{ comment.username }}</span>
          <svg-icon v-if="comment.replyUsername" icon-class="right-arrow" />
          <span>{{ comment.replyUsername }}</span>
        </div>
        <div class="title-reply--handle">
          <span class="like-item">
            <span class="like-icon" @click="likeIconClick">
              <svg-icon v-if="comment.clickLike" class-name="clicked" icon-class="like-yes" />
              <svg-icon v-else icon-class="like-no" />
            </span>
            <span v-if="comment.likeCount > 0" class="text-sm">
              <span v-if="comment.likeCount < 100">{{ comment.likeCount }}</span>
              <span v-else>99+</span>
            </span>
          </span>
          <span class="dislike-item">
            <span class="dislike-icon" @click="dislikeIconClick">
              <svg-icon v-if="comment.clickDislike" class-name="clicked" icon-class="dislike-yes" />
              <svg-icon v-else icon-class="dislike-no" />
            </span>

            <span v-if="comment.dislikeCount > 0" class="text-sm">
              <span v-if="comment.dislikeCount < 100">{{ comment.dislikeCount }}</span>
              <span v-else>99+</span>
            </span>
          </span>
        </div>
      </div>
      <!--评论信息-->
      <div class="text-sm font-number info">
        <!--发布时间-->
        <span class="info-item">
          <span class="push-text">{{ '发布于' + ' ' }}</span>
          <span>
            {{ timeGap(comment.createTime) }}
          </span>
          <!--版本信息-->
          <span class="version-info">
            <!--浏览器版本-->
            <span class="browser-info">
              <svg-icon :icon-class="`browser-` + comment.browser" />
              <span class="browser-info-l">{{ comment.browser + ' ' }}</span>
              <span class="browser-info-r">{{ comment.browserVersion }}</span>
            </span>
            <!--系统版本-->
            <span class="sys-info">
              <svg-icon :icon-class="`os-` + comment.system" />
              <span class="sys-info-l">{{ comment.system + ' ' }}</span>
              <span class="sys-info-r">{{ comment.systemVersion }}</span>
            </span>
          </span>
        </span>
        <!--IP 信息-->
        <span class="info-item">
          <span class="ip-text">IP属地:</span>
          <span>{{ comment.ipAddress }}</span>
        </span>
      </div>
    </div>
  </div>
</template>

<!--公共CSS-->
<style scoped lang="scss">
.title {
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  align-content: space-between;
  justify-content: space-between;
}

.info {
  color: #919ba5;
  margin-top: 5px;
}

.info-item {
  margin-right: 5px;
}
.version-info {
  &::before {
    content: '(';
    margin-right: 3px;
  }
  &::after {
    content: ')';
  }
  :nth-child(n) {
    margin-right: 3px;
  }
}

.like-icon:hover,
.dislike-icon :hover {
  color: #da5b5a;
}

.clicked {
  color: #da5b5a;
}
</style>

<!--区分设备-->
<style scoped lang="scss">
@media screen and (min-width: 760px) {
  .title-reply {
    display: flex;
    justify-content: start;
    align-items: center;
    .title-reply--handle {
      margin-left: 20px;
      .like-item {
      }
      .dislike-item {
        margin: 0 10px;
      }
    }
  }
}

@media screen and (max-width: 759px) {
  .title-reply {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-reply--handle {
      .dislike-item {
        margin: 0 0 0 10px;
      }
    }
  }

  .info {
    display: flex;
    flex-direction: column;
  }
  .info-item {
    margin-right: 0;
  }
  .push-text {
    display: none;
  }

  .browser-info {
    .browser-info-l {
      display: none;
    }
  }
  .sys-info {
    .sys-info-l {
      display: none;
    }
  }
}
</style>
